<template>
  <div class="my-applications">
    <div class="page-header">
      <h1>我的申请</h1>
      <p>查看和管理你的申请记录</p>
    </div>
    
    <!-- 申请状态筛选 -->
    <div class="filter-section">
      <el-card>
        <el-radio-group v-model="activeStatus" @change="handleStatusChange">
          <el-radio-button label="all">全部</el-radio-button>
          <el-radio-button label="pending">待审核</el-radio-button>
          <el-radio-button label="approved">已通过</el-radio-button>
          <el-radio-button label="rejected">已驳回</el-radio-button>
        </el-radio-group>
      </el-card>
    </div>
    
    <!-- 申请列表 -->
    <div class="applications-section">
      <el-timeline>
        <el-timeline-item
          v-for="application in filteredApplications"
          :key="application.id"
          :timestamp="formatDateTime(application.created_time)"
          :type="getTimelineType(application.status)"
        >
          <el-card class="application-card">
            <div class="application-header">
              <h3 class="application-title">{{ application.title }}</h3>
              <el-tag
                :type="getStatusType(application.status)"
                size="small"
              >
                {{ getStatusText(application.status) }}
              </el-tag>
            </div>
            
            <div class="application-content">
              <div class="application-info">
                <div class="info-row">
                  <span class="info-label">申请类型：</span>
                  <span class="info-value">{{ application.type }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">申请对象：</span>
                  <span class="info-value">{{ application.target_name }}</span>
                </div>
                <div class="info-row">
                  <span class="info-label">申请时间：</span>
                  <span class="info-value">{{ formatDateTime(application.created_time) }}</span>
                </div>
                <div v-if="application.review_time" class="info-row">
                  <span class="info-label">审核时间：</span>
                  <span class="info-value">{{ formatDateTime(application.review_time) }}</span>
                </div>
                <div v-if="application.reviewer_name" class="info-row">
                  <span class="info-label">审核人：</span>
                  <span class="info-value">{{ application.reviewer_name }}</span>
                </div>
              </div>
              
              <div class="application-reason">
                <h4>申请理由：</h4>
                <p>{{ application.reason || '无' }}</p>
              </div>
              
              <div v-if="application.review_comment" class="review-comment">
                <h4>审核意见：</h4>
                <p>{{ application.review_comment }}</p>
              </div>
            </div>
            
            <div class="application-actions">
              <el-button
                v-if="application.status === 0"
                type="primary"
                @click="handleViewApplication(application.id)"
              >
                查看详情
              </el-button>
              <el-button
                v-if="application.status === 0"
                type="danger"
                @click="handleCancelApplication(application.id)"
              >
                撤销申请
              </el-button>
              <el-button
                v-if="application.status === 1"
                type="success"
                @click="handleViewResult(application.id)"
              >
                查看结果
              </el-button>
              <el-button
                v-if="application.status === 2"
                @click="handleReapply(application.id)"
              >
                重新申请
              </el-button>
            </div>
          </el-card>
        </el-timeline-item>
      </el-timeline>
    </div>
    
    <!-- 空状态 -->
    <div v-if="filteredApplications.length === 0" class="empty-state">
      <el-empty description="暂无申请记录">
        <el-button type="primary" @click="goToDiscovery">
          去发现社团
        </el-button>
      </el-empty>
    </div>
  </div>
</template>

<script>
import { ref, computed, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox } from 'element-plus'

export default {
  name: 'MyApplications',
  setup() {
    const router = useRouter()
    
    const activeStatus = ref('all')
    
    const myApplications = ref([
      {
        id: 1,
        title: '加入摄影社团申请',
        type: '加入社团',
        target_name: '摄影社团',
        reason: '我热爱摄影，希望能加入摄影社团学习更多技巧，与志同道合的朋友交流。',
        status: 0, // 0: 待审核, 1: 已通过, 2: 已驳回
        created_time: '2024-01-15 14:30:00',
        review_time: null,
        reviewer_name: null,
        review_comment: null
      },
      {
        id: 2,
        title: '加入篮球社团申请',
        type: '加入社团',
        target_name: '篮球社团',
        reason: '我从小就喜欢打篮球，希望能加入篮球社团参与更多比赛。',
        status: 1,
        created_time: '2024-01-10 16:20:00',
        review_time: '2024-01-12 10:30:00',
        reviewer_name: '李四',
        review_comment: '欢迎加入篮球社团！'
      },
      {
        id: 3,
        title: '加入编程社团申请',
        type: '加入社团',
        target_name: '编程社团',
        reason: '我对编程很感兴趣，希望能在社团中学习更多技术。',
        status: 2,
        created_time: '2024-01-08 09:15:00',
        review_time: '2024-01-10 14:20:00',
        reviewer_name: '王五',
        review_comment: '很抱歉，目前社团人数已满，请关注后续招新信息。'
      }
    ])
    
    const filteredApplications = computed(() => {
      if (activeStatus.value === 'all') {
        return myApplications.value
      }
      
      const statusMap = {
        pending: 0,
        approved: 1,
        rejected: 2
      }
      
      return myApplications.value.filter(
        application => application.status === statusMap[activeStatus.value]
      )
    })
    
    const getStatusType = (status) => {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      }
      return typeMap[status] || 'info'
    }
    
    const getStatusText = (status) => {
      const textMap = {
        0: '待审核',
        1: '已通过',
        2: '已驳回'
      }
      return textMap[status] || '未知'
    }
    
    const getTimelineType = (status) => {
      const typeMap = {
        0: 'warning',
        1: 'success',
        2: 'danger'
      }
      return typeMap[status] || 'info'
    }
    
    const formatDateTime = (dateTime) => {
      if (!dateTime) return '未知'
      const date = new Date(dateTime)
      return date.toLocaleString('zh-CN')
    }
    
    const handleStatusChange = () => {
      // 状态改变时的处理
    }
    
    const handleViewApplication = (applicationId) => {
      console.log('查看申请详情:', applicationId)
      // 跳转到申请详情页面
    }
    
    const handleCancelApplication = async (applicationId) => {
      try {
        await ElMessageBox.confirm(
          '确定要撤销该申请吗？',
          '提示',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }
        )
        
        // 这里实现撤销申请逻辑
        ElMessage.success('已撤销申请')
      } catch (error) {
        if (error !== 'cancel') {
          ElMessage.error('操作失败')
        }
      }
    }
    
    const handleViewResult = (applicationId) => {
      console.log('查看申请结果:', applicationId)
      // 跳转到申请结果页面
    }
    
    const handleReapply = (applicationId) => {
      console.log('重新申请:', applicationId)
      // 跳转到重新申请页面
    }
    
    const goToDiscovery = () => {
      router.push('/discovery/club-square')
    }
    
    onMounted(() => {
      // 初始化数据
    })
    
    return {
      activeStatus,
      myApplications,
      filteredApplications,
      getStatusType,
      getStatusText,
      getTimelineType,
      formatDateTime,
      handleStatusChange,
      handleViewApplication,
      handleCancelApplication,
      handleViewResult,
      handleReapply,
      goToDiscovery
    }
  }
}
</script>

<style lang="scss" scoped>
.my-applications {
  .page-header {
    margin-bottom: 24px;

    h1 {
      margin: 0 0 8px;
      font-size: 28px;
      font-weight: 600;
      color: #303133;
    }

    p {
      margin: 0;
      font-size: 16px;
      color: #606266;
    }
  }

  .filter-section {
    margin-bottom: 24px;
  }

  .applications-section {
    .application-card {
      .application-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16px;

        .application-title {
          margin: 0;
          font-size: 18px;
          font-weight: 600;
          color: #303133;
        }
      }

      .application-content {
        .application-info {
          margin-bottom: 16px;

          .info-row {
            display: flex;
            margin-bottom: 8px;
            font-size: 14px;

            &:last-child {
              margin-bottom: 0;
            }

            .info-label {
              color: #909399;
              width: 80px;
              flex-shrink: 0;
            }

            .info-value {
              color: #606266;
            }
          }
        }

        .application-reason,
        .review-comment {
          margin-bottom: 16px;

          h4 {
            margin: 0 0 8px;
            font-size: 14px;
            font-weight: 600;
            color: #303133;
          }

          p {
            margin: 0;
            font-size: 14px;
            color: #606266;
            line-height: 1.5;
            background: #f5f7fa;
            padding: 12px;
            border-radius: 4px;
          }
        }
      }

      .application-actions {
        display: flex;
        gap: 8px;
        margin-top: 16px;
      }
    }
  }

  .empty-state {
    text-align: center;
    padding: 60px 0;
  }
}
</style>
